<template>
    <div class="login">
        <van-nav-bar
            title="登录"
            left-arrow
            @click-left="goBack"
        />
        <van-form @submit="onLogin">
            <van-field
                v-model="tel"
                left-icon="smile-o"
                type="tel"
                label="手机号"
                name="mobile"
                :autocomplete="false"
                :rules="[{ validator: isTel, message: '请输入正确的手机号' }]"
            />
            <van-field
                v-model="authCode"
                left-icon="smile-o"
                label="验证码"
                name="code"
                :autocomplete="false"
                :rules="[{ validator: isAuthCode, message: '请输入正确的验证码' }]"
            >
                <template #button>
                    <van-button
                        round
                        color="#ccc"
                        size="mini"
                        type="primary"
                        class="send-auth-code-btn"
                        :disabled="sending"
                        @click="onSendAuthCode"
                    >
                        {{ sendText }}
                    </van-button>
                </template>
            </van-field>
            <div class="btn-wrapper">
                <van-button
                    block
                    type="info"
                    native-type="submit"
                >
                    登录
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script src="./main.js"></script>

<style lang="less" scoped>
.btn-wrapper {
    margin: 32px 16px;
}
.send-auth-code-btn {
    width: 70px;
    color: #333 !important;
}
</style>
